{{define "footer"}}
<footer class="bg-cyan-900 text-white text-center">
	<div class="w-11/12 max-w-screen-xl mx-auto py-6 flex flex-row flex-wrap">
		<div class="w-full md:w-1/5">
			<!-- power by -->
			<div class="">
				<img class="h-16 my-2 mx-auto" src="{{index .extend.profile.logo 1}}" alt="" />
			</div>
			<!-- made love -->
			<p class="h-10 leading-10 my-3 text-gray-400 font-thin">
				Made with<em class="mx-2 text-xl text-red-500">♥</em> by Fundipper
			</p>
		</div>

		<!-- Product -->
		<ul class="hidden md:block md:w-1/5">
			<li class="h-10 leading-10 text-xl">Product</li>
			<li class="h-10 leading-10 text-sm">
				<a href="/doc/overview/start/">Doc</a>
			</li>
			<li class="h-10 leading-10 text-sm">
				<a href="/themes/">Theme</a>
			</li>
			<li class="h-10 leading-10 text-sm">
				<a href="/blog/">Blog</a>
			</li>
		</ul>

		<!-- opensource -->
		<ul class="hidden md:block md:w-1/5">
			<li class="h-10 leading-10 text-xl">Github</li>
			<li class="h-10 leading-10 text-sm">FED</li>
			<li class="h-10 leading-10 text-sm">BED</li>
			<li class="h-10 leading-10 text-sm">Lab</li>
		</ul>

		<!-- about -->
		<ul class="hidden md:block md:w-1/5">
			<li class="h-10 leading-10 text-xl">Help</li>
			<li class="h-10 leading-10 text-sm">
				<a href="/help/about/">About</a>
			</li>
			<li class="h-10 leading-10 text-sm">
				<a href="/help/terms/">Terms</a>
			</li>
			<li class="h-10 leading-10 text-sm">
				<a href="/help/privacy/">Privacy</a>
			</li>
		</ul>

		<!-- contact -->
		<div class="w-full md:w-1/5">
			<p class="h-10 leading-10 text-xl">Follow US</p>
			<ul class="flex flex-row">
				<li class="w-1/3">
					<p>
						<img class="h-6 my-2 mx-auto" src="/assets/img/icon/twitter.png" alt="" />
					</p>
					<p class="h-10 leading-10">Twitter</p>
				</li>
				<li class="w-1/3">
					<p>
						<img class="h-6 my-2 mx-auto" src="/assets/img/icon/youtube.png" alt="" />
					</p>
					<p class="h-10 leading-10">Youtube</p>
				</li>
				<li class="w-1/3">
					<p>
						<img class="h-6 my-2 mx-auto" src="/assets/img/icon/github.png" alt="" />
					</p>
					<p class="h-10 leading-10">Github</p>
				</li>
			</ul>
		</div>
	</div>

	<!-- copy right-->
	<p class="h-10 leading-10 border-t border-cyan-800 text-sm">{{.extend.profile.copyright}}</p>
</footer>

<script>
	const btn = document.querySelector(".menu_button");
	const bar = document.querySelector(".menu_bar");

	btn.addEventListener("click", () => {
		bar.classList.toggle("hidden");
	});
</script>
{{end}}
